<script setup lang="ts" name="NavigationBarCellProperty">
import { NavigationBarCellProperty } from '../config'
import { usePropertyForm } from '@/components/Designer/utils/index'
// 导航栏属性面板

const props = defineProps<{
  modelValue: NavigationBarCellProperty[]
  isMp: boolean
}>()
const emit = defineEmits(['update:modelValue'])
const { formData: cellList } = usePropertyForm(props.modelValue, emit)
if (!cellList.value) cellList.value = []

// 单元格数量：小程序6个（右侧胶囊按钮占了2个），其它平台8个
const cellCount = computed(() => (props.isMp ? 6 : 8))

// 选中的热区
const selectedHotAreaIndex = ref(0)
const handleHotAreaSelected = (cellValue: NavigationBarCellProperty, index: number) => {
  selectedHotAreaIndex.value = index
  if (!cellValue.type) {
    cellValue.type = 'text'
    cellValue.textColor = '#111111'
  }
}
</script>

<template>
  <div class="h-40px flex items-center justify-center">
    <MagicCube v-model="cellList" class="m-b-16px" :rows="1" :cols="cellCount" :cube-size="38" @hot-area-selected="handleHotAreaSelected" />
    <img v-if="isMp" src="@/assets/imgs/diy/app-nav-bar-mp.png" alt="" class="h-30px w-76px" />
  </div>
  <template v-for="(cell, cellIndex) in cellList" :key="cellIndex">
    <template v-if="selectedHotAreaIndex === cellIndex">
      <ElFormItem label="类型" :prop="`cell[${cellIndex}].type`">
        <ElRadioGroup v-model="cell.type">
          <ElRadio label="text">文字</ElRadio>
          <ElRadio label="image">图片</ElRadio>
          <ElRadio label="search">搜索框</ElRadio>
        </ElRadioGroup>
      </ElFormItem>
      <!-- 1. 文字 -->
      <template v-if="cell.type === 'text'">
        <ElFormItem label="内容" :prop="`cell[${cellIndex}].text`">
          <ElInput v-model="cell!.text" maxlength="10" show-word-limit />
        </ElFormItem>
        <ElFormItem label="颜色" :prop="`cell[${cellIndex}].text`">
          <ColorInput v-model="cell!.textColor" />
        </ElFormItem>
      </template>
      <!-- 2. 图片 -->
      <template v-else-if="cell.type === 'image'">
        <ElFormItem label="图片" :prop="`cell[${cellIndex}].imgUrl`">
          <UploadImage v-model="cell.imgUrl" :limit="1" height="56px" width="56px">
            <template #tip>建议尺寸 56*56</template>
          </UploadImage>
        </ElFormItem>
        <ElFormItem label="链接" :prop="`cell[${cellIndex}].url`">
          <MallAppLinkInput v-model="cell.url" />
        </ElFormItem>
      </template>
      <!-- 3. 搜索框 -->
      <template v-else>
        <ElFormItem label="提示文字" :prop="`cell[${cellIndex}].placeholder`">
          <ElInput v-model="cell.placeholder" maxlength="10" show-word-limit />
        </ElFormItem>
        <ElFormItem label="圆角" :prop="`cell[${cellIndex}].borderRadius`">
          <ElSlider v-model="cell.borderRadius" :max="100" :min="0" show-input input-size="small" :show-input-controls="false" />
        </ElFormItem>
      </template>
    </template>
  </template>
</template>

<style scoped lang="scss"></style>
